<template>
    <div class="bg">
        <div id="top">
            <div class="topw">基础信息</div>
            <div class="topd">
            </div>
        </div>
        <div id="main">
            <table>
                <tr>
                    <td>
                        <span class="l-l-s">登陆手机号:</span>
                        <span class="l-r-s" v-text="UserData.mobile"></span>
                    </td>
                    <td>
                        <span class="l-l-s">用户昵称:</span>
                        <el-input  v-show="updateUser"  v-model="UserData.nickname" label-width="70px"
                                  placeholder="请输入内容"></el-input >
                        <span v-show="!updateUser" class="l-r-s" v-text="UserData.nickname"></span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span class="l-l-s">微信号:</span>
                        <el-input v-show="updateUser" maxlength="10" v-model="UserData.openid" label-width="70px"
                                  placeholder="请输入内容"></el-input><br v-show="updateUser">
                        <span v-show="updateUser" style="color: deepskyblue">最大输入为10个中文字符</span>
                        <span v-show="!updateUser" class="l-r-s" v-text="UserData.openid"></span>
                    </td>
                    <td>
                        <span class="l-l-s">年龄:</span>
                        <el-input v-show="updateUser" maxlength="3" v-model="UserData.age" label-width="70px"
                                  placeholder="请输入内容"></el-input>
                        <span v-show="!updateUser" class="l-r-s" v-text="UserData.age"></span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span class="l-l-s">性别:</span>
                        <el-radio-group v-show="updateUser" size="mini" :border="true" v-model="radio">
                            <el-radio :label="2">男</el-radio>
                            <el-radio :label="1">女</el-radio>
                            <el-radio :label="3">保密</el-radio>
                        </el-radio-group>
                        <span v-show="!updateUser" class="l-r-s"
                              v-text="UserData.sex===1?'女':(UserData.sex===2?'男':'保密')"></span>
                    </td>
                    <td>
                        <span class="l-l-s">个性签名:</span>
                        <el-input v-show="updateUser" v-model="UserData.sign" label-width="200px"
                                  placeholder="请输入内容"></el-input>
                        <span v-show="!updateUser" class="l-r-s" v-text="UserData.sign"></span>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <span class="l-l-s" style="position: relative;top: -35px;left: -20px">个人头像:</span>
                        <img style="width: 100px;height: 100px" :src="UserData.avatar">
                    </td>
                </tr>
                <tr>
                    <!--                    头像上传-->
                    <td colspan="2" style="line-height: 45px">
                        <div v-show="updateUser" style="width: 230px;height: 46px;position: relative;left: 200px">
                            <div id="imgdv">
                                <span id="imgsp">选择头像</span>
                                <input type="file" id="uploadImage" placeholder="点击上传" accept="image/jpeg,image/png"/>
                            </div>
                            <span class="el-upload__tip">
                                仅支持jpg或png格式文件
                            </span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="line-height: 45px">
                        <el-button v-show="!updateUser" type="danger" style="width: 200px" @click="updateUser=true">
                            修改信息
                        </el-button>
                        <el-button v-show="updateUser" type="danger" style="width: 100px" @click="qx">取消
                        </el-button>
                        <el-button v-show="updateUser" type="danger" style="width: 100px" @click="upLoad">保存
                        </el-button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script>
    import OSS from 'ali-oss';
    export default {
        name: "information",
        data() {
            return {
                //用户信息
                UserData: [],
                updateUser: false,
                //性别
                radio: 3,
                loading: false
            }
        },

        methods: {

            //加载页面时查询用户
            searchMember() {
                var that = this;
                var token = sessionStorage.getItem("token")
                this.$http.get(`/member/findMemberByToken/${token}`).then(function (success) {
                    that.UserData = success.data.result;
                    that.radio=that.UserData.sex;
                })
            },
            //取消修改
            qx(){
                this.updateUser=false;
              this.searchMember();
            },
            //修改信息
            upLoad() {
                let that =this;
                that.loading=true
                //图片地址
                var avatar=null;
                //获取文件信息
                const files = document.getElementById("uploadImage")
                //如果有文件
                if (files.files.length!=0) {
                    var client = new OSS({
                        region: 'oss-cn-beijing',
                        accessKeyId: 'LTAI5tSg7FEsJYoEwCwy31gB',
                        accessKeySecret: 'TePXV7cvof8Qmstmc59SnCvH8bC9L5',
                        bucket: 'alilitest'
                    });
                    const fileLen = document.getElementById("uploadImage").files
                    const file = document.getElementById("uploadImage").files[0]
                    //文件名
                    let consat = file.name;
                    //获取后缀
                    let fileName = consat.lastIndexOf(".");//取到文件名开始到最后一个点的长度
                    let fileNameLength = consat.length;//取到文件名长度
                    let fileFormat = consat.substring(fileName + 1, fileNameLength);//截
                    if (fileFormat==="png"||fileFormat==="jpg"){
                        //随机名
                        let ronname=Math.round( Math.random()*1000000000);
                        //最终文件名
                        let name = '/lingke/web/user/'+ronname+'.'+fileFormat
                        for (let i = 0; i < fileLen.length; i++) {
                            const file = fileLen[i]
                            client.multipartUpload(name, file).then(function(res){
                                that.loading=false
                                var str=res.res.requestUrls[0]
                                avatar=str.split("?")[0]
                                that.$emit('childByValue', str.split("?")[0])
                            }).catch((err) => {
                                console.log(err)
                            })
                        }

                    }else {
                        this.$notify.error({
                            title: '错误',
                            message: '格式不正确！仅支持png或jpg类型文件'
                        });
                    }
                    }

                clearTimeout(this.timer);  //清除延迟执行
                this.timer = setTimeout(()=>{   //设置延迟执行获取图片地址
                    that.UserData.sex=that.radio;
                    if (avatar!=null){
                        that.UserData.avatar=avatar;
                    }
                    if (that.UserData.age<0){

                        this.$notify.error({
                            title: '错误',
                            message: '年龄最小为0岁'
                        });
                    }else {
                        that.$http.post(`/member/updateMember`,that.UserData).then(function (success) {
                            if (success.data.code==2000){
                                var token=sessionStorage.getItem("token")
                                that.$http.get(`/member/upTokenUser/${token}`).then(function (tokensuccess) {

                                    that.updateUser=false;
                                    that.searchMember();
                                })
                                that.updateUser=false;
                                that.searchMember();

                                that.$message.success(success.data.msg)
                            }else {
                                that.$message.error(success.data.msg)
                            }
                        })
                        that.updateUser=false;
                        that.searchMember();
                    }
                },1000);
            },

        },
        created() {
            this.searchMember();
        }
    }
</script>

<style scoped>
    #main {
        float: left;
        margin-top: 20px;
        margin-left: 30px;
        font-size: 12px;
    }

    #main > table > td {
        width: 400px;
    }
    #imgdv{
        background: skyblue;
        width: 56px;
        height: 16px;
        border-radius: 12px;
        padding: 12px 20px;
        float: left;
    }
    #imgsp{
        position: relative;
        top: -15px;
        left: -3px;
        color: white;
        float: right;
    }
    #uploadImage{
        opacity:0;
        width: 95px;
        height: 39px;
        position: relative;
        top: -60px;
        left: -20px;
    }
    .el-input {
        width: 180px;
    }

    .l-l-s {
        line-height: 45px;
        display: inline-block;
        width: 150px;
        text-align: right;
    }

    .l-r-s {
        margin-left: 20px;
        line-height: 45px;
        width: 150px;
        text-align: left;
        display: inline-block;
    }
</style>